@import "color/colors";

// Prefix
@css-prefix: haloe-;
@css-prefix-iconfont: haloe-icon;

// color
// 预留颜色变亮，其他组件使用时可根据原型设置颜色值
@primary-color: @color-brand-primary;
@processing-color: @primary-color;
@warning-color: @gold-6;
@error-color: @color-functional-fail;
@error-hover-color: color(~`colorPalette('@{error-color}', 5) `);
@link-color: #2D8cF0;
@link-hover-color: tint(@link-color, 20%);
@link-active-color: shade(@link-color, 5%);
@selected-color: @primary-color;
@subsidiary-color: @color-complementary-5;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-xs-max: (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
@screen-sm-max: (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;
@screen-md-max: (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;
@screen-lg-max: (@screen-lg-min - 1);

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;
@screen-xl-max: (@screen-xl-min - 1);

// Extra extra large screen / large descktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
@screen-xxl-max: (@screen-xxl-min - 1);

// Base
@font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
  "Source Han Sans CN", sans-serif;
@code-family: Consolas,Menlo,Courier,monospace;
@font-size-base: 12px;
@font-size-small: 12px;
@font-size-middle: 14px;
@font-size-large: 16px;
@font-weight: normal;
@line-height-base: 1.5;
@line-height-computed: floor((@font-size-base * @line-height-base));
@cursor-disabled: not-allowed;
@height-xs: 20px;
@height-small: 24px;
@height-middle: 28px;
@height-base: 32px;
@height-large: 40px;
@text-color: @color-complementary-3;
@title-color: #17233d;

// horizontal paddings
@padding-lg: 30px; // modal,notification
@padding-md: @height-xs; // tab,alert,message
@padding-base: 15px; // botton,tag
@padding-sm: 10px; // select,search,input

// Border
@border-width-base: 1px;   // width of the border for a component
@border-style-base: solid; // style of a components border
@border-radius-base: 2px;
@border-color-base: #dcdee2;  // outside
@color-border-message-info: @color-border-info;
@color-border-message-warning: @color-border-warning;
@color-border-message-error: @color-border-error;
@color-border-message-success: @color-border-success;

@background-color-base:@color-complementary-13;
@border-radius-small: 4px;
@border-color-base: @color-complementary-7;  // outside
@border-color-split: @color-complementary-8;  // inside

// Shadow
@shadow-color: @color-shadow3;
@shadow-base: @shadow-down;
@shadow-card: 0 1px 6px rgba(0, 0, 0, .2);
// @shadow-up              :
@shadow-down: 0 0 10px 0 @shadow-color;
// @shadow-left            :
// @shadow-right           :

// Button
@btn-height-base: 32px;
@btn-height-middle: 28px;
@btn-height-small: 24px;

@btn-padding-base: 0 @padding-base - 1px;
@btn-padding-middle: 0 @padding-base - 1px;
@btn-padding-small: 0 @padding-sm - 1px;

@btn-font-weight: normal;
@btn-padding-base-icon: 5px 15px 6px;
@btn-padding-middle-icon: 5px 15px 6px;
@btn-padding-small-icon: 1px 7px 2px;
@btn-font-size: @font-size-base;
// @btn-font-size-middle: @font-size-middle;
@btn-font-size-middle: @font-size-base;
@btn-font-size-small: @font-size-base;
@btn-font-size-large: @font-size-large;
@btn-border-radius: @border-radius-base;
@btn-border-radius-middle: @border-radius-base;
@btn-border-radius-small: @border-radius-base;
@btn-group-border: shade(@color-brand-primary, 5%);

@btn-active-color: @color-brand-active;
@btn-hover-color: @color-brand-hover;

@btn-disable-color: @color-text-disabled;
@btn-disable-bg: @color-complementary-8;
@btn-disable-border: @color-complementary-7;

@btn-primary-disable-color: @color-functional-white;
@btn-primary-disable-bg: @color-brand-disabled1;
@btn-primary-disable-border: @color-brand-disabled1;

@btn-secondary-disable-color: @color-functional-pause;
@btn-secondary-disable-bg: @color-bg-disable;
@btn-secondary-disable-border: @color-border-disable;

// 新规范：次按钮（没有边框）不可用
@btn-secondary-new-disable-color: @color-brand-disabled2;
@btn-secondary-new-disable-bg: @color-bg-page;
@btn-secondary-new-disable-border: @color-bg-page;

@btn-primary-color: @color-functional-white;
@btn-primary-hover-color: @color-brand-hover;
@btn-primary-bg: @color-brand-primary;
@btn-primary-border: @color-brand-primary;

@btn-secondary-color: @color-text-level1;
@btn-secondary-bg: @color-functional-white;
@btn-secondary-border: @color-scrollbar;

// 新规范：次按钮（没有边框）
@btn-secondary-new-color: @color-text-level4;
@btn-secondary-new-bg: @color-bg-page;
@btn-secondary-new-border: @color-bg-page;
@btn-secondary-new-hover-color: @color-brand-hover;

@btn-error-color: @color-functional-fail;
// @btn-error-bg: @color-functional-white;
@btn-error-bg:@color-bg-card;
@btn-error-border: @color-functional-fail;
@btn-error-hover-color: @color-functional-danger-hover;
@btn-error-active-bg: @color-functional-danger-hover;

// @btn-drop-color: @color-brand-primary;
// @btn-drop-hover-color: @color-brand-hover;
// @btn-drop-bg: transparent;
// @btn-drop-border: transparent;
// @btn-drop-active-bg: transparent;

@btn-text-color: @color-brand-primary;
@btn-text-hover-color: @color-brand-hover;
@btn-text-bg: transparent;
@btn-text-border: transparent;
@btn-text-active-bg: transparent;

@btn-ghost-color: @color-functional-white;
@btn-ghost-bg: @color-brand-primary;
@btn-ghost-border: @color-brand-primary;

@btn-circle-size: @btn-height-base;
@btn-circle-size-large: @btn-height-base;
@btn-circle-size-middle: @btn-height-middle;
@btn-circle-size-small: @btn-height-small;

@btn-square-size: @btn-height-base;
@btn-square-size-large: @btn-height-base;
@btn-square-size-middle: @btn-height-middle;
@btn-square-size-small: @btn-height-small;
// @btn-disable-color: @color-complementary-6;


// Layout
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-footer-padding: @height-small 50px;
@layout-trigger-height: 48px;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;


// Legend
@legend-color: @color-complementary-5;


// Input
@input-height-base: @height-base;
@input-height-large: @height-base;
@input-height-middle: @height-middle;
@input-height-small: @height-small;
@input-padding-horizontal: 7px;
@input-padding-vertical-base: 4px;
@input-padding-vertical-small: 1px;
@input-padding-vertical-large: 6px;

@input-placeholder-color: @btn-disable-color;
@input-color: @text-color;
@input-border-color: @border-color-base;
@input-bg: @color-functional-white;

@input-hover-border-color: @primary-color;
@input-focus-border-color: @primary-color;
@input-disabled-bg: @color-complementary-8;

@input-prefix-bg: #F5F5F5;
@input-prefix-color: #555;

// Input-Number
@input-number-width-base: 80px;

// Z-index
@zindex-spin: 8;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-menu: 1;
@zindex-select: 900;
@zindex-auto-complete-spin: 910;
@zindex-modal: 1000;
@zindex-drawer: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-tooltip: 1060;
@zindex-transfer: 1060;
@zindex-loading-bar: 2000;
@zindex-spin-fullscreen: 2010;

// Animation
@animation-time: .3s;
@animation-time-quick: .15s;
@transition-time: .2s;
@ease-in-out: ease-in-out;

// Slider
@slider-height: 6px;
@slider-margin: 16px 0;
@slider-button-wrap-size: 18px;
@slider-button-wrap-offset: -5px;
@slider-wrap-border-radius: 8px;

// @slider-color              :
@slider-disabled-color: @color-complementary-7;
@slider-color: @primary-color;
@slider-disabled-bar-color: @color-border-disable;
@slider-maker-color:@color-scrollbar;
@slider-bar-color:@color-scrollbar-track;

// Avatar
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-border-radius: @border-radius-small;

// Anchor
@anchor-border-width: 2px;

// List
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;

// Radio
@radio-disabled-bg: @color-brand-disabled2;
@radio-checked-bg: @color-bg-nomal;

//select
@background-color-select-hover:@color-bg-hover;
@background-color-selection:@color-bg-card;
// layout
@layout-body-background: #f0f1f5;
@layout-header-background: #515a6e;
@layout-header-height: 50px;
@layout-header-padding: 0 50px;
@layout-footer-padding: 24px 50px;
@layout-footer-background: #fff;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 50px;
@layout-zero-trigger-height: 50px;
@layout-footer-height: 80px;
@layout-title-height: 60px;
@layout-content-margin: 20px;
@layout-content-color: #fff;
@layout-zero-trigger-color:#327bff;
@layout-trigger-width: 8px;
@layout-trigger-radius: 3px;

//grid
@grid-columns                : 24;
@grid-gutter-width           : 0;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;
@screen-xs-max          : (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm              : 576px;
@screen-sm-min          : @screen-sm;
@screen-sm-max          : (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md              : 768px;
@screen-md-min          : @screen-md;
@screen-md-max          : (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg              : 992px;
@screen-lg-min          : @screen-lg;
@screen-lg-max          : (@screen-lg-min - 1);

// Extra large screen / full hd
@screen-xl              : 1200px;
@screen-xl-min          : @screen-xl;
@screen-xl-max          : (@screen-xl-min - 1);

// Extra extra large screen / large descktop
@screen-xxl             : 1600px;
@screen-xxl-min         : @screen-xxl;
@screen-xxl-max         : (@screen-xxl-min - 1);

// table
@shadow-right: 1px 0 6px @shadow-color;
@table-td-highlight-bg        : @color-bg-hover;
@table-td-hover-bg            : rgba(232, 240, 255, 0.4);
@table-td-stripe-bg           : #F5F5F6;
@table-thead-bg               : @color-bg-table-head;
@table-common-background      : @color-functional-white;
@table-head-icon      : #5C6A87;
@table-expanded-cell-bg       : #F6F7FB;

//popconfirm
@popconfirm-arrow-color: hsla(0,0%,85%,.5);
@popconfirm-arrow-color:@color-bg-popconfirm;
@popconfirm-confirm-icon-color: #ff9900;
@popconfirm-inner-color: #17233d;
@popconfirm-max-width: 250px;
@popconfirm-arrow-width: 7px;
@popconfirm-arrow-outer-width: (@popconfirm-arrow-width + 1);
@popconfirm-distance: @popconfirm-arrow-width - 1 + 4;

// tabs
@tabs-hover-color: @color-brand-primary;
@tabs-card-bg: @color-complementary-8;
@tabs-container-bg: @color-bg-page;
@tabs-container-hover-bg: fade(@color-functional-white, 60);
@tabs-container-active-bg: @color-functional-white;
@tabs-container-gap: @color-complementary-22;

@rate-star-color        : #f5a623;

//tag
@tag-circle-width:10px;
@tag-default-border: transparent;
@tag-circle-border: transparent;
@tag-circle-border: transparent;
@tag-default-color: #75849B;

//alert
@alert-bg-success:#E7F7EA;
@alert-bg-warning:#FDF5E6;
@alert-bg-fail:#FCEBEA;
@alert-bg-info:#E8F0FF;

@alert-icon-warning:#FF9933;
@alert-icon-info:#3399E5;
// Tag
@tag-font-size          : 12px;
@success-color: @color-functional-success;
@warning-color: @color-functional-warning;

//switch
@switch-not-checked-hover: #b0b1ba; //未选中时悬浮背景颜色
// tooltip
@tooltip-bg-color: @color-bg-embed;
@tooltip-shadow: 0 0 9px 0 rgba(186, 191, 209, 0.6);

// steps
@steps-main-bg-color: @color-brand-primary;
@steps-main-title-color: @color-complementary-1;
@steps-wait-title-color: #7D7E87;
@steps-tail-color: @color-border-disable;


// message
@message-info-color: @color-brand-primary;
@message-warning-color: @color-functional-warning;
@message-success-color: @color-functional-success;
@message-error-color: @color-functional-fail;
@message-text-color: #333333;

@message-dark-bg-color: @color-complementary-3;
@message-dark-shadow: @color-shadow-notice;

@message-info-dark-color: @color-brand-primary;
@message-warning-dark-color: @color-functional-warning;
@message-success-dark-color: @color-functional-success;
@message-error-dark-color: @color-functional-fail;


// collapse
@collapse-text-color: @color-text-level1;
@collapse-border-color: @color-scrollbar;
@collapse-content-bg-color: #F6F7FB;
// @collapse-disabled-border-color: @color-border-disable;
@collapse-disabled-text-color: @color-functional-pause;
@collapse-disabled-content-bg-color: @color-complementary-8;


// breadcrumb
@breadcrumb-disabled-color: @color-functional-pause;
@breadcrumb-hover-color: @color-brand-press;
@breadcrumb-separator-color: #C4C4CB;
@breadcrumb-text-color: @color-text-level1;

// page
@page-border-color: @color-scrollbar;
@page-disabled-bg-color: @color-complementary-8;
@page-disabled-text-color: @color-complementary-7;

// upload
@upload-color-bg-disable: #F5F5F6;
@upload-color-text-disable: #9D9EA9;
@upload-color-border-disable: #D7D8DC;

// tree
@tree-color-focus-bg: #E8F0FF;
@tree-color-hover-bg: #F6F7FB;
@tree-color-border-line: #E1E5EE;

// search
@search-icon-close-circle: #bbb;
@search-icon-disabled-prefix: #999;

//checkbox
@checkbox-inner-border-color: #9ba8c8;